<template>
  <div class="app-container">
<!--    <el-table-->
<!--      :data="tableData1"-->
<!--      size="mini"-->
<!--      style="width: 2000px"-->

<!--    >-->
<!--      <el-table-column-->
<!--        prop="date"-->
<!--        label="店铺"-->
<!--        width="80">-->
<!--        <div class="item" slot-scope="scope">-->
<!--          <el-input class="item__input" v-model="scope.row.shopName" placeholder="请输入内容"></el-input>-->
<!--          <div class="item__txt">{{scope.row.shopName}}</div>-->
<!--        </div>-->
<!--      </el-table-column>-->

<!--      <el-table-column-->
<!--        prop="name"-->
<!--        v-for="(item, i) in columns"-->
<!--        :label= "'6.' + item"-->
<!--        :key= i-->
<!--        width="83"-->
<!--      >-->
<!--        <template scope="scope" :style="classObje(foodLabel1(scope.row.shopName,i))">-->
<!--          <div  @click="handleUpdate(scope.row,scope.row.shopName,'6.'+item,foodLabel(scope.row.shopName,i))">-->
<!--            <span :style="classObje( foodLabel1(scope.row.shopName,i) )" >-->
<!--                {{foodLabel(scope.row.shopName,i)}}-->
<!--            </span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->


<!--      <el-table-column-->
<!--        label="操作"-->
<!--        width="100">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button @click="save(scope.row)" type="text" size="small">保存</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->


    <el-table
      :data="tableData1"
      size="mini"
      style="width: 2000px"
      :cell-style="tableCellStyle"
    >
      <el-table-column
        prop="date"
        label="店铺"
        width="80">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.shopName" placeholder="请输入内容"></el-input>
          <div v-bind:style="{fontSize: '14px' , fontWeight: 'bold' ,fontStyle:'' , fontFamily:'楷体'}" class="item__txt">{{scope.row.shopName}}</div>
        </div>
      </el-table-column>

      <el-table-column
        prop="name"
        v-for="(item, i) in columns"
        :label= item.taskTime
        :key= i
        width="83"
      >
        <template scope="scope" >
          <div   @click="handleUpdate(scope.row,scope.row.shopName,scope.row.dates[i].taskTime,scope.row.dates[i].taskItem)">
<!--            <span :style="classObje(scope.row.dates[i].taskProgress)"  >-->
            <span  v-bind:style="{fontSize: '18px' , fontWeight: 'bold' ,fontStyle:'' , fontFamily:'宋体'}" >
              {{scope.row.dates[i].taskItem}}
            </span>
          </div>
        </template>
      </el-table-column>


      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="save(scope.row)" type="text" size="small">保存</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-loading="loading" :data="workList" >
      <el-table-column
        prop="date"
        label="店铺"
        width="80">
        <div class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.shopName" placeholder="请输入内容"></el-input>
          <div v-bind:style="{fontSize: '14px' , fontWeight: 'bold' ,fontStyle:'' , fontFamily:'楷体'}" class="item__txt">{{scope.row.shopName}}</div>
        </div>
      </el-table-column>
      <el-table-column label="任务时间" align="center" prop="taskTime"  />
      <el-table-column label="负责人" align="center" >
        <div class="item" slot-scope="scope">
        <el-input  v-model="scope.row.responsiblePerson"  placeholder="负责人" />
        </div>
      </el-table-column>
      <el-table-column label="任务项" align="center" prop="taskItem" >
        <div class="item" slot-scope="scope">
          <el-select v-model="scope.row.taskItem" >
            <el-option
              v-for="dict in dict.type.task_item"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </div>
      </el-table-column>
      <el-table-column label="任务类" align="center" prop="taskClass" >
        <div class="item" slot-scope="scope">
          <el-select v-model="scope.row.taskClass" clearable>
            <div v-if="scope.row.taskItem === '上货'">
              <el-option
                v-for="dict in dict.type.cargo_task_class"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </div>
            <div v-if="scope.row.taskItem === '优化'">
              <el-option
                v-for="dict in dict.type.optimize_task_class"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </div>
          </el-select>
        </div>
      </el-table-column>
      <el-table-column label="任务进度" align="center" prop="taskProgress" >
        <div class="item" slot-scope="scope">
          <el-select v-model="scope.row.taskProgress" >
            <el-option
              v-for="dict in dict.type.task_progress"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </div>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="更新者" align="center" prop="updateBy" />
      <el-table-column label="更新时间" align="center" prop="updateTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="submitTable(scope.row)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="店铺名" prop="shop_name">
          <el-input :disabled = "true" v-model="form.shopName" placeholder="店铺名" />
        </el-form-item>
        <el-form-item label="任务时间" prop="task_time">
          <el-input :disabled = "true"  v-model="form.taskTime" placeholder="任务时间" />
        </el-form-item>
        <el-form-item label="负责人" prop="responsiblePerson">
          <el-input   v-model="form.responsiblePerson" placeholder="负责人" />
        </el-form-item>
        <el-form-item label="任务项" prop="task_item">
          <el-select v-model="form.taskItem" >
            <el-option
              v-for="dict in dict.type.task_item"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务类" prop="task_class">
          <el-select v-model="form.taskClass" clearable>
            <div v-if="form.taskItem === '上货'">
              <el-option
                v-for="dict in dict.type.cargo_task_class"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </div>
            <div v-if="form.taskItem === '优化'">
              <el-option
                v-for="dict in dict.type.optimize_task_class"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="任务进度" prop="task_progress">
          <el-select v-model="form.taskProgress" clearable>
            <el-option
              v-for="dict in dict.type.task_progress"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建者" prop="create_by">
          <el-input :disabled = "true" v-model="form.createBy" placeholder="创建者" />
        </el-form-item>
        <el-form-item label="创建时间" prop="create_time">
          <el-input :disabled = "true" v-model="form.createTime" placeholder="创建时间" />
        </el-form-item>
        <el-form-item label="更新者" prop="update_by">
          <el-input :disabled = "true" v-model="form.updateBy" placeholder="更新者" />
        </el-form-item>
        <el-form-item label="更新时间" prop="update_time">
          <el-input :disabled = "true" v-model="form.updateTime" placeholder="更新时间" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {addTilte, getTilte, listTilte, updateTilte} from "@/api/violate/tilte";
import {addWork, delWork, getTaskWork, listGantt, listWork, oneWork, updateWork} from "@/api/violate/work";
import {getData} from "@/api/system/dict/data";

export default {
  dicts: ['task_progress','shop', 'sys_user_sex','choose','price_range_th','price_range_bk','optimize_task_class','cargo_task_class','task_item'],
  data () {
    return {
      // 遮罩层
      loading: true,
      sign: '' ,
      columns: [],
      cargo: '上货',
      optimize: '优化' ,
      open: false,
      title: "",
      // 表单参数
      form: {},
      form1: {},
      rules: {
      },
      // 下拉选项
      options: [{
        value: '6.1',
        label: '上货'
      },
        {
        value: '6.2',
        label: '优化'
      }],
      // 表格数据
      tableData: [
        {
        id: 0,
        shopName: '澜野',
        date1: {
          data: '上货',
          color: 0,
        },
        date2: {
          data: '优化',
          color: 1,
        },
        date3: {
          data: '优化',
          color: 1,
        },
        date4: {
          data: '优化',
          color: 1,
        },
        date5: {
          data: '上货',
          color: 1,
        },
        date6: {
          data: '优化',
          color: 1,
        },
        date7: {
          data: '优化',
          color: 1,
        },
        date8: {
          data: '优化',
          color: 1,
        },
        date9: {
          data: '上货',
          color: 1,
        },
        date10:{
          data: '优化',
          color: 1,
        },
        date11:{
          data: '优化',
          color: 1,
        },
        date12:{
          data: '优化',
          color: 1,
        },
        date13:{
          data: '上货',
          color: 1,
        },
        date14:{
          data: '优化',
          color: 1,
        },
        date15:{
          data: '优化',
          color: 1,
        },
        date16:{
          data: '优化',
          color: 1,
        },
        date17:{
          data: '上货',
          color: 1,
        },
        date18:{
          data: '优化',
          color: 1,
        },
        date19:{
          data: '优化',
          color: 1,
        },
        date20:{
          data: '优化',
          color: 1,
        },
        date21:{
          data: '上货',
          color: 1,
        },
        date22:{
          data: '优化',
          color: 1,
        },
        date23:{
          data: '优化',
          color: 1,
        },
        date24:{
          data: '优化',
          color: 1,
        },
        date25:{
          data: '上货',
          color: 1,
        },
        date26:{
          data: '优化',
          color: 1,
        },
        date27:{
          data: '优化',
          color: 1,
        },
        date28:{
          data: '优化',
          color: 1,
        },
        date29:{
          data: '上货',
          color: 1,
        },
        date30:{
          data: '优化',
          color: 1,
        },
        date31:{
          data: '优化',
          color: 1,
        },
      },
        {
        id: 1,
        shopName: '奢典',
        date1: {
          data: '上货',
          color: 1,
        },
        date2: {
          data: '上货',
          color: 1,
        },
        date3: {
          data: '上货',
          color: 1,
        },
        date4: {
          data: '上货',
          color: 1,
        },
        date5: {
          data: '上货',
          color: 1,
        },
        date6: {
          data: '上货',
          color: 1,
        },
        date7: {
          data: '上货',
          color: 1,
        },
        date8: {
          data: '上货',
          color: 1,
        },
        date9: {
          data: '上货',
          color: 1,
        },
        date10:{
          data: '上货',
          color: 1,
        } ,
        date11:{
          data: '上货',
          color: 1,
        } ,
        date12:{
          data: '上货',
          color: 1,
        } ,
        date13:{
          data: '上货',
          color: 1,
        } ,
        date14:{
          data: '上货',
          color: 1,
        } ,
        date15:{
          data: '上货',
          color: 1,
        } ,
        date16:{
          data: '上货',
          color: 1,
        } ,
        date17:{
          data: '上货',
          color: 1,
        } ,
        date18:{
          data: '上货',
          color: 1,
        } ,
        date19:{
          data: '上货',
          color: 1,
        } ,
        date20:{
          data: '上货',
          color: 1,
        } ,
        date21:{
          data: '上货',
          color: 1,
        } ,
        date22:{
          data: '上货',
          color: 1,
        } ,
        date23:{
          data: '上货',
          color: 1,
        } ,
        date24:{
          data: '上货',
          color: 1,
        } ,
        date25:{
          data: '上货',
          color: 1,
        } ,
        date26:{
          data: '上货',
          color: 1,
        } ,
        date27:{
          data: '上货',
          color: 1,
        } ,
        date28:{
          data: '上货',
          color: 1,
        } ,
        date29:{
          data: '上货',
          color: 1,
        } ,
        date30:{
          data: '上货',
          color: 1,
        } ,
        date31:{
          data: '上货',
          color: 1,
        } ,
      },
        {
        id: 2,
        shopName: '泷希翊',
        date1: {
            data: '上货',
            color: 0,
          },
        date2: {
            data: '优化',
            color: 1,
          },
          date3: {
            data: '优化',
            color: 1,
          },
          date4: {
            data: '优化',
            color: 1,
          },
          date5: {
            data: '上货',
            color: 1,
          },
          date6: {
            data: '优化',
            color: 1,
          },
          date7: {
            data: '优化',
            color: 1,
          },
          date8: {
            data: '优化',
            color: 1,
          },
          date9: {
            data: '上货',
            color: 1,
          },
          date10:{
            data: '优化',
            color: 1,
          },
          date11:{
            data: '优化',
            color: 1,
          },
          date12:{
            data: '优化',
            color: 1,
          },
          date13:{
            data: '上货',
            color: 1,
          },
          date14:{
            data: '优化',
            color: 1,
          },
          date15:{
            data: '优化',
            color: 1,
          },
          date16:{
            data: '优化',
            color: 1,
          },
          date17:{
            data: '上货',
            color: 1,
          },
          date18:{
            data: '优化',
            color: 1,
          },
          date19:{
            data: '优化',
            color: 1,
          },
          date20:{
            data: '优化',
            color: 1,
          },
          date21:{
            data: '上货',
            color: 1,
          },
          date22:{
            data: '优化',
            color: 1,
          },
          date23:{
            data: '优化',
            color: 1,
          },
          date24:{
            data: '优化',
            color: 1,
          },
          date25:{
            data: '上货',
            color: 1,
          },
          date26:{
            data: '优化',
            color: 1,
          },
          date27:{
            data: '优化',
            color: 1,
          },
          date28:{
            data: '优化',
            color: 1,
          },
          date29:{
            data: '上货',
            color: 1,
          },
          date30:{
            data: '优化',
            color: 1,
          },
          date31:{
            data: '优化',
            color: 1,
          },
      },
        {
        id: 3,
          shopName: '婗可姣',
          date1: {
            data: '上货',
            color: 0,
          },
          date2: {
            data: '优化',
            color: 1,
          },
          date3: {
            data: '优化',
            color: 1,
          },
          date4: {
            data: '优化',
            color: 1,
          },
          date5: {
            data: '上货',
            color: 1,
          },
          date6: {
            data: '优化',
            color: 1,
          },
          date7: {
            data: '优化',
            color: 1,
          },
          date8: {
            data: '优化',
            color: 1,
          },
          date9: {
            data: '上货',
            color: 1,
          },
          date10:{
            data: '优化',
            color: 1,
          },
          date11:{
            data: '优化',
            color: 1,
          },
          date12:{
            data: '优化',
            color: 1,
          },
          date13:{
            data: '上货',
            color: 1,
          },
          date14:{
            data: '优化',
            color: 1,
          },
          date15:{
            data: '优化',
            color: 1,
          },
          date16:{
            data: '优化',
            color: 1,
          },
          date17:{
            data: '上货',
            color: 1,
          },
          date18:{
            data: '优化',
            color: 1,
          },
          date19:{
            data: '优化',
            color: 1,
          },
          date20:{
            data: '优化',
            color: 1,
          },
          date21:{
            data: '上货',
            color: 1,
          },
          date22:{
            data: '优化',
            color: 1,
          },
          date23:{
            data: '优化',
            color: 1,
          },
          date24:{
            data: '优化',
            color: 1,
          },
          date25:{
            data: '上货',
            color: 1,
          },
          date26:{
            data: '优化',
            color: 1,
          },
          date27:{
            data: '优化',
            color: 1,
          },
          date28:{
            data: '优化',
            color: 1,
          },
          date29:{
            data: '上货',
            color: 1,
          },
          date30:{
            data: '优化',
            color: 1,
          },
          date31:{
            data: '优化',
            color: 1,
          },
      },
        {
        id: 4,
          shopName: '棵恩',
          date1: {
            data: '上货',
            color: 0,
          },
          date2: {
            data: '优化',
            color: 1,
          },
          date3: {
            data: '优化',
            color: 1,
          },
          date4: {
            data: '优化',
            color: 1,
          },
          date5: {
            data: '上货',
            color: 1,
          },
          date6: {
            data: '优化',
            color: 1,
          },
          date7: {
            data: '优化',
            color: 1,
          },
          date8: {
            data: '优化',
            color: 1,
          },
          date9: {
            data: '上货',
            color: 1,
          },
          date10:{
            data: '优化',
            color: 1,
          },
          date11:{
            data: '优化',
            color: 1,
          },
          date12:{
            data: '优化',
            color: 1,
          },
          date13:{
            data: '上货',
            color: 1,
          },
          date14:{
            data: '优化',
            color: 1,
          },
          date15:{
            data: '优化',
            color: 1,
          },
          date16:{
            data: '优化',
            color: 1,
          },
          date17:{
            data: '上货',
            color: 1,
          },
          date18:{
            data: '优化',
            color: 1,
          },
          date19:{
            data: '优化',
            color: 1,
          },
          date20:{
            data: '优化',
            color: 1,
          },
          date21:{
            data: '上货',
            color: 1,
          },
          date22:{
            data: '优化',
            color: 1,
          },
          date23:{
            data: '优化',
            color: 1,
          },
          date24:{
            data: '优化',
            color: 1,
          },
          date25:{
            data: '上货',
            color: 1,
          },
          date26:{
            data: '优化',
            color: 1,
          },
          date27:{
            data: '优化',
            color: 1,
          },
          date28:{
            data: '优化',
            color: 1,
          },
          date29:{
            data: '上货',
            color: 1,
          },
          date30:{
            data: '优化',
            color: 1,
          },
          date31:{
            data: '优化',
            color: 1,
          },
      },
        {
        id: 5,
          shopName: '蕴洋',
          date1: {
            data: '上货',
            color: 0,
          },
          date2: {
            data: '优化',
            color: 1,
          },
          date3: {
            data: '优化',
            color: 1,
          },
          date4: {
            data: '优化',
            color: 1,
          },
          date5: {
            data: '上货',
            color: 1,
          },
          date6: {
            data: '优化',
            color: 1,
          },
          date7: {
            data: '优化',
            color: 1,
          },
          date8: {
            data: '优化',
            color: 1,
          },
          date9: {
            data: '上货',
            color: 1,
          },
          date10:{
            data: '优化',
            color: 1,
          },
          date11:{
            data: '优化',
            color: 1,
          },
          date12:{
            data: '优化',
            color: 1,
          },
          date13:{
            data: '上货',
            color: 1,
          },
          date14:{
            data: '优化',
            color: 1,
          },
          date15:{
            data: '优化',
            color: 1,
          },
          date16:{
            data: '优化',
            color: 1,
          },
          date17:{
            data: '上货',
            color: 1,
          },
          date18:{
            data: '优化',
            color: 1,
          },
          date19:{
            data: '优化',
            color: 1,
          },
          date20:{
            data: '优化',
            color: 1,
          },
          date21:{
            data: '上货',
            color: 1,
          },
          date22:{
            data: '优化',
            color: 1,
          },
          date23:{
            data: '优化',
            color: 1,
          },
          date24:{
            data: '优化',
            color: 1,
          },
          date25:{
            data: '上货',
            color: 1,
          },
          date26:{
            data: '优化',
            color: 1,
          },
          date27:{
            data: '优化',
            color: 1,
          },
          date28:{
            data: '优化',
            color: 1,
          },
          date29:{
            data: '上货',
            color: 1,
          },
          date30:{
            data: '优化',
            color: 1,
          },
          date31:{
            data: '优化',
            color: 1,
          },
      },
        {
        id: 6,
          shopName: '纤彩美绘',
          date1: {
            data: '上货',
            color: 0,
          },
          date2: {
            data: '优化',
            color: 1,
          },
          date3: {
            data: '优化',
            color: 1,
          },
          date4: {
            data: '优化',
            color: 1,
          },
          date5: {
            data: '上货',
            color: 1,
          },
          date6: {
            data: '优化',
            color: 1,
          },
          date7: {
            data: '优化',
            color: 1,
          },
          date8: {
            data: '优化',
            color: 1,
          },
          date9: {
            data: '上货',
            color: 1,
          },
          date10:{
            data: '优化',
            color: 1,
          },
          date11:{
            data: '优化',
            color: 1,
          },
          date12:{
            data: '优化',
            color: 1,
          },
          date13:{
            data: '上货',
            color: 1,
          },
          date14:{
            data: '优化',
            color: 1,
          },
          date15:{
            data: '优化',
            color: 1,
          },
          date16:{
            data: '优化',
            color: 1,
          },
          date17:{
            data: '上货',
            color: 1,
          },
          date18:{
            data: '优化',
            color: 1,
          },
          date19:{
            data: '优化',
            color: 1,
          },
          date20:{
            data: '优化',
            color: 1,
          },
          date21:{
            data: '上货',
            color: 1,
          },
          date22:{
            data: '优化',
            color: 1,
          },
          date23:{
            data: '优化',
            color: 1,
          },
          date24:{
            data: '优化',
            color: 1,
          },
          date25:{
            data: '上货',
            color: 1,
          },
          date26:{
            data: '优化',
            color: 1,
          },
          date27:{
            data: '优化',
            color: 1,
          },
          date28:{
            data: '优化',
            color: 1,
          },
          date29:{
            data: '上货',
            color: 1,
          },
          date30:{
            data: '优化',
            color: 1,
          },
          date31:{
            data: '优化',
            color: 1,
          },
      },
        {
        id: 7,
          shopName: '妙绘童',
          date1: {
            data: '上货',
            color: 0,
          },
          date2: {
            data: '优化',
            color: 1,
          },
          date3: {
            data: '优化',
            color: 1,
          },
          date4: {
            data: '优化',
            color: 1,
          },
          date5: {
            data: '上货',
            color: 1,
          },
          date6: {
            data: '优化',
            color: 1,
          },
          date7: {
            data: '优化',
            color: 1,
          },
          date8: {
            data: '优化',
            color: 1,
          },
          date9: {
            data: '上货',
            color: 1,
          },
          date10:{
            data: '优化',
            color: 1,
          },
          date11:{
            data: '优化',
            color: 1,
          },
          date12:{
            data: '优化',
            color: 1,
          },
          date13:{
            data: '上货',
            color: 1,
          },
          date14:{
            data: '优化',
            color: 1,
          },
          date15:{
            data: '优化',
            color: 1,
          },
          date16:{
            data: '优化',
            color: 1,
          },
          date17:{
            data: '上货',
            color: 1,
          },
          date18:{
            data: '优化',
            color: 1,
          },
          date19:{
            data: '优化',
            color: 1,
          },
          date20:{
            data: '优化',
            color: 1,
          },
          date21:{
            data: '上货',
            color: 1,
          },
          date22:{
            data: '优化',
            color: 1,
          },
          date23:{
            data: '优化',
            color: 1,
          },
          date24:{
            data: '优化',
            color: 1,
          },
          date25:{
            data: '上货',
            color: 1,
          },
          date26:{
            data: '优化',
            color: 1,
          },
          date27:{
            data: '优化',
            color: 1,
          },
          date28:{
            data: '优化',
            color: 1,
          },
          date29:{
            data: '上货',
            color: 1,
          },
          date30:{
            data: '优化',
            color: 1,
          },
          date31:{
            data: '优化',
            color: 1,
          },
      },
        {
        id: 8,
          shopName: '她菲',
          date1: {
            data: '上货',
            color: 0,
          },
          date2: {
            data: '优化',
            color: 1,
          },
          date3: {
            data: '优化',
            color: 1,
          },
          date4: {
            data: '优化',
            color: 1,
          },
          date5: {
            data: '上货',
            color: 1,
          },
          date6: {
            data: '优化',
            color: 1,
          },
          date7: {
            data: '优化',
            color: 1,
          },
          date8: {
            data: '优化',
            color: 1,
          },
          date9: {
            data: '上货',
            color: 1,
          },
          date10:{
            data: '优化',
            color: 1,
          },
          date11:{
            data: '优化',
            color: 1,
          },
          date12:{
            data: '优化',
            color: 1,
          },
          date13:{
            data: '上货',
            color: 1,
          },
          date14:{
            data: '优化',
            color: 1,
          },
          date15:{
            data: '优化',
            color: 1,
          },
          date16:{
            data: '优化',
            color: 1,
          },
          date17:{
            data: '上货',
            color: 1,
          },
          date18:{
            data: '优化',
            color: 1,
          },
          date19:{
            data: '优化',
            color: 1,
          },
          date20:{
            data: '优化',
            color: 1,
          },
          date21:{
            data: '上货',
            color: 1,
          },
          date22:{
            data: '优化',
            color: 1,
          },
          date23:{
            data: '优化',
            color: 1,
          },
          date24:{
            data: '优化',
            color: 1,
          },
          date25:{
            data: '上货',
            color: 1,
          },
          date26:{
            data: '优化',
            color: 1,
          },
          date27:{
            data: '优化',
            color: 1,
          },
          date28:{
            data: '优化',
            color: 1,
          },
          date29:{
            data: '上货',
            color: 1,
          },
          date30:{
            data: '优化',
            color: 1,
          },
          date31:{
            data: '优化',
            color: 1,
          },
      }
      ],
      tableData1: [],
      tableData2: [],
      // 【请填写功能名称】表格数据
      workList: [],
      // 需要编辑的属性
      editProp: ['date', 'name', 'food'],
      // 保存进入编辑的cell
      clickCellMap: {}
    }
  },

  computed: {
    foodLabel () {
      return (date,val) => {
        if (val == 0){
          return this.tableData1.find(o => o.shopName === date).date1.taskItem ;
        }
        if (val == 1){
          return this.tableData1.find(o => o.shopName === date).date2.taskItem ;
        }
        if (val == 2){
          return this.tableData1.find(o => o.shopName === date).date3.taskItem ;
        }
        if (val == 3){
          return this.tableData1.find(o => o.shopName === date).date4.taskItem ;
        }
        if (val == 4){
          return this.tableData1.find(o => o.shopName === date).date5.taskItem ;
        }
        if (val == 5){
          return this.tableData1.find(o => o.shopName === date).date6.taskItem ;
        }
        if (val == 6){
          return this.tableData1.find(o => o.shopName === date).date7.taskItem ;
        }
        if (val == 7){
          return this.tableData1.find(o => o.shopName === date).date8.taskItem ;
        }
        if (val == 8){
          return this.tableData1.find(o => o.shopName === date).date9.taskItem ;
        }
        if (val == 9){
          return this.tableData1.find(o => o.shopName === date).date10.taskItem ;
        }
        if (val == 10){
          return this.tableData1.find(o => o.shopName === date).date11.taskItem;
        }
        if (val ==11){
          return this.tableData1.find(o => o.shopName === date).date12.taskItem ;
        }
        if (val == 12){
          return this.tableData1.find(o => o.shopName === date).date13.taskItem ;
        }
        if (val == 13){
          return this.tableData1.find(o => o.shopName === date).date14.taskItem ;
        }
        if (val == 14){
          return this.tableData1.find(o => o.shopName === date).date15.taskItem ;
        }
        if (val == 15){
          return this.tableData1.find(o => o.shopName === date).date16.taskItem ;
        }
        if (val == 16){
          return this.tableData1.find(o => o.shopName === date).date17.taskItem ;
        }
        if (val == 17){
          return this.tableData1.find(o => o.shopName === date).date18.taskItem;
        }
        if (val == 18){
          return this.tableData1.find(o => o.shopName === date).date19.taskItem;
        }
        if (val == 19){
          return this.tableData1.find(o => o.shopName === date).date20.taskItem;
        }
        if (val == 20){
          return this.tableData1.find(o => o.shopName === date).date21.taskItem;
        }
        if (val == 21){
          return this.tableData1.find(o => o.shopName === date).date22.taskItem;
        }
        if (val == 22){
          return this.tableData1.find(o => o.shopName === date).date23.taskItem;
        }
        if (val == 23){
          return this.tableData1.find(o => o.shopName === date).date24.taskItem;
        }
        if (val == 24){
          return this.tableData1.find(o => o.shopName === date).date25.taskItem;
        }
        if (val == 25){
          return this.tableData1.find(o => o.shopName === date).date26.taskItem;
        }
        if (val == 26){
          return this.tableData1.find(o => o.shopName === date).date27.taskItem;
        }
        if (val == 27){
          return this.tableData1.find(o => o.shopName === date).date28.taskItem;
        }
        if (val == 28){
          return this.tableData1.find(o => o.shopName === date).date29.taskItem;
        }
        if (val == 29){
          return this.tableData1.find(o => o.shopName === date).date30.taskItem;
        }
        if (val == 30){
          return this.tableData1.find(o => o.shopName === date).date31.taskItem;
        }
        return this.tableData1.find(o => o.shopName === date).date1.taskItem ;
      }
    },
    foodLabel1 () {
      return (date,val) => {
        if (val == 0) {
          return this.tableData1.find(o => o.shopName === date).date1.taskProgress;
        }
        if (val == 1) {
          return this.tableData1.find(o => o.shopName === date).date2.taskProgress;
        }
        if (val == 2) {
          return this.tableData1.find(o => o.shopName === date).date3.taskProgress;
        }
        if (val == 3) {
          return this.tableData1.find(o => o.shopName === date).date4.taskProgress;
        }
        if (val == 4) {
          return this.tableData1.find(o => o.shopName === date).date5.taskProgress;
        }
        if (val == 5) {
          return this.tableData1.find(o => o.shopName === date).date6.taskProgress;
        }
        if (val == 6) {
          return this.tableData1.find(o => o.shopName === date).date7.taskProgress;
        }
        if (val == 7) {
          return this.tableData1.find(o => o.shopName === date).date8.taskProgress;
        }
        if (val == 8){
          return this.tableData1.find(o => o.shopName === date).date9.taskProgress;
        }
        if (val == 9){
          return this.tableData1.find(o => o.shopName === date).date10.taskProgress ;
        }
        if (val == 10){
          return this.tableData1.find(o => o.shopName === date).date11.taskProgress;
        }
        if (val ==11){
          return this.tableData1.find(o => o.shopName === date).date12.taskProgress ;
        }
        if (val == 12){
          return this.tableData1.find(o => o.shopName === date).date13.taskProgress ;
        }
        if (val == 13){
          return this.tableData1.find(o => o.shopName === date).date14.taskProgress ;
        }
        if (val == 14){
          return this.tableData1.find(o => o.shopName === date).date15.taskProgress ;
        }
        if (val == 15){
          return this.tableData1.find(o => o.shopName === date).date16.taskProgress ;
        }
        if (val == 16){
          return this.tableData1.find(o => o.shopName === date).date17.taskProgress ;
        }
        if (val == 17){
          return this.tableData1.find(o => o.shopName === date).date18.taskProgress;
        }
        if (val == 18){
          return this.tableData1.find(o => o.shopName === date).date19.taskProgress;
        }
        if (val == 19){
          return this.tableData1.find(o => o.shopName === date).date20.taskProgress;
        }
        if (val == 20){
          return this.tableData1.find(o => o.shopName === date).date21.taskProgress;
        }
        if (val == 21){
          return this.tableData1.find(o => o.shopName === date).date22.taskProgress;
        }
        if (val == 22){
          return this.tableData1.find(o => o.shopName === date).date23.taskProgress;
        }
        if (val == 23){
          return this.tableData1.find(o => o.shopName === date).date24.taskProgress;
        }
        if (val == 24){
          return this.tableData1.find(o => o.shopName === date).date25.taskProgress;
        }
        if (val == 25){
          return this.tableData1.find(o => o.shopName === date).date26.taskProgress;
        }
        if (val == 26){
          return this.tableData1.find(o => o.shopName === date).date27.taskProgress;
        }
        if (val == 27){
          return this.tableData1.find(o => o.shopName === date).date28.taskProgress;
        }
        if (val == 28){
          return this.tableData1.find(o => o.shopName === date).date29.taskProgress;
        }
        if (val == 29){
          return this.tableData1.find(o => o.shopName === date).date30.taskProgress;
        }
        if (val == 30){
          return this.tableData1.find(o => o.shopName === date).date31.taskProgress;
        }
        return this.tableData1.find(o => o.shopName === date).date1.taskProgress ;
      }
    },
    selectLabel () {
      return (date,val) => {
        this.form1.shopName = date ;
        this.form1.taskTime = "6."+(val+1) ;
        if (this.form1.taskProgress == null ){
          return 0 ;
        }
        return this.form1.taskProgress ;
      }
    }

  },
  created() {
    this.getList();
  },
  methods: {
    // 背景颜色处理
    tableCellStyle ({row, column, rowIndex, columnIndex}) {
      if (columnIndex!=0 && columnIndex!=32){
        if (row.dates[columnIndex-1].taskProgress == null){
          return 'background-color: #FF3333;'
        }
        if (row.dates[columnIndex-1].taskProgress == 0){
          return 'background-color: #FF3333;'
        }
        if (row.dates[columnIndex-1].taskProgress == 1){
          return 'background-color: #5599FF;'
        }
        if (row.dates[columnIndex-1].taskProgress == 2){
          return 'background-color: #00FF00;'
        }
        if (row.dates[columnIndex-1].taskProgress == 3){
          return 'background-color: #99FFFF;'
        }
      }



    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      listGantt(this.queryParams).then(response => {
        console.log(response.rows) ;
        this.tableData1 = response.rows;
        this.columns = this.tableData1[0].dates ;
        console.log(this.columns) ;
        console.log("this.tableData1==",this.tableData1) ;
      });
    },

    classObje(date) {
      if (date === null) {
        return { color: "#FF0000" };
      }
      if (date === 0) {
        return { color: "#FF0000" };
      }
      if (date === 1) {
        return { color: "#0066FF" };
      }
      if (date === 2 ) {
        return { color: "#00FF00" };
      }
      if (date === 3 ) {
        return { color: "#99FFFF" };
      }
    },

    // 表单重置
    reset(shopName,taskTime,taskItem) {
      this.form = {
        shopName: shopName,
        taskTime: taskTime,
        responsiblePerson: null ,
        taskItem: null,
        taskClass: null,
        taskProgress: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    // 表单重置
    resetShopName(data) {
      this.workList = [{
        id: data.id,
        shopName: data.shopName,
        taskTime: data.taskTime,
        responsiblePerson: data.responsiblePerson ,
        taskItem: data.taskItem,
        taskClass: data.taskClass,
        taskProgress: data.taskProgress,
        createBy: data.createBy,
        createTime: data.createTime,
        updateBy: data.updateBy,
        updateTime: data.updateTime,
      }];
    },
    /** 鼠标移入cell */
    handleCellEnter (row, column, cell, event) {
      const property = column.property
      if (property === 'date' || property === 'name' || property === 'food') {
        cell.querySelector('.item__txt').classList.add('item__txt--hover')
      }
    },
    /** 鼠标移出cell */
    handleCellLeave (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        cell.querySelector('.item__txt').classList.remove('item__txt--hover')
      }
    },
    /** 点击cell */
    handleCellClick (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        // 保存cell
        this.saveCellClick(row, cell)
        cell.querySelector('.item__txt').style.display = 'none'
        cell.querySelector('.item__input').style.display = 'block'
        cell.querySelector('input').focus()
      }
    },
    /** 取消编辑状态 */
    cancelEditable (cell) {
      cell.querySelector('.item__txt').style.display = 'block'
      cell.querySelector('.item__input').style.display = 'none'
    },
    /** 保存进入编辑的cell */
    saveCellClick (row, cell) {
      const id = row.id
      if (this.clickCellMap[id] !== undefined) {
        if (!this.clickCellMap[id].includes(cell)) {
          this.clickCellMap[id].push(cell)
        }
      } else {
        this.clickCellMap[id] = [cell]
      }
    },
    /** 保存数据 */
    save (row) {
      const id = row.id
      // 取消本行所有cell的编辑状态
      this.clickCellMap[id].forEach(cell => {
        this.cancelEditable(cell)
      })
      this.clickCellMap[id] = []
    },
    /** 修改按钮操作 */
    handleUpdate(row,shopName,taskTime,taskItem) {
       this.reset(shopName,taskTime,taskItem);
      getTaskWork(this.form).then(response =>{
        if (response.data.taskProgress == 0){
          response.data.taskProgress = "未完成" ;
        }
        if (response.data.taskProgress == 1){
          response.data.taskProgress = "进行中" ;
        }
        if (response.data.taskProgress == 2){
          response.data.taskProgress = "已完成" ;
        }
        if (response.data.taskProgress == 3){
          response.data.taskProgress = "系统故障" ;
        }
        this.form = response.data;
        this.workList[0] = response.data;
        console.log("this.workList",this.workList) ;
        console.log(this.workList[0]) ;
        this.resetShopName(response.data) ;
        this.loading = false ;
        // this.open = true ;
        this.title = "添加【请填写功能名称】";
      });
    },
    /** 修改按钮操作 */
    handleUpdate1(row) {
      this.reset();
      const id = row.id || this.ids
      getTilte(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改【请填写功能名称】";
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.taskProgress == "未完成"){
            this.form.taskProgress= 0 ;
          }
          if (this.form.taskProgress == "进行中"){
            this.form.taskProgress = 1 ;
          }
          if (this.form.taskProgress == "已完成"){
            this.form.taskProgress = 2 ;
          }
          if (this.form.taskProgress == "系统故障"){
            this.form.taskProgress = 3 ;
          }
          console.log("this.form",this.form)

          if (this.form.createBy != null) {
            updateWork(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.resetShopName(this.form) ;
            });
          } else {
            addWork(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.resetShopName(this.form) ;
            });
          }
        }
      });
    },
    submitTable(data) {
      console.log("data",data) ;
          if (data.taskProgress == "未完成"){
            data.taskProgress= 0 ;
          }
          if (data.taskProgress == "进行中"){
            data.taskProgress = 1 ;
          }
          if (data.taskProgress == "已完成"){
            data.taskProgress = 2 ;
          }
          if (data.taskProgress == "系统故障"){
            data.taskProgress = 3 ;
          }
          if (data.createBy != null) {
            updateWork(data).then(response => {
              console.log("aaa") ;
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.resetShopName(data) ;
            });
          } else {
            addWork(data).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.resetShopName(data) ;
            });
          }
    }
  }
}
</script>

<style lang='scss'>

.item{
  .item__input{
    display: none;
    width: 100px;
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__inner{
      height: 24px!important;
    }
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__suffix{
      i{
        font-size: 12px !important;
        line-height: 26px !important;
      }
    }
  }
  .item__txt{
    box-sizing: border-box;
    border: 1px solid transparent;
    width: 100px;
    line-height: 24px;
    padding: 0 8px;
  }
  .item__txt--hover{
    border: 1px solid #dddddd;
    border-radius: 4px;
    cursor: text;
  }
}
</style>

